import { BrowserRouter, Link, Navigate, Route, Routes } from "react-router-dom"
import Home from "./pages/Home/Home"
import About from "./pages/About/About"
import A from "./pages/A/A"
import B from "./pages/B/B"

import NotFound from "./components/NotFound"

const App=()=>{
  return (
    // 指定路由模式
    <BrowserRouter>
      {/* 定义路由入口 */}
      <Link to={"/home"}>跳转到Home</Link>
      <Link to={"/about"}>跳转到About</Link>
      {/* 定义路由出口，相当于占位符 */}
      {/* 定义路由匹配规则 */}
      <Routes>
        {/* 一个Route就是一条路由匹配规则 */}

        {/* 重定向 */}
        <Route path="/" element={<Navigate to={"/home"}></Navigate>} />

        {/* 通过index设置默认展示的路由 */}
        {/* <Route index element={<About></About>} /> */}

        <Route path="/home" element={<Home></Home>}>
        </Route>
        <Route path="/about" element={<About></About>}>
          {/* 嵌套路由 */}
          <Route index element={<A/>}></Route>
          <Route path="b" element={<B/>}></Route>
        </Route>


        {/* 设置404页面 */}
        <Route path="*" element={<NotFound/>}></Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App